@require '../css/variable.styl'
@require '../css/func.styl'

.sm-radio
    position: relative
    display: inline-block
    height: 24px
    line-height: 24px
    cursor: pointer
    user-select: none
    input[type="radio"]
        display: none
        &:checked ~ .sm-radio-wrapper
            .sm-radio-icon-uncheck
                opacity: 0
                transform: scale(0)
                color: $md-colors.lightBlue500

            .sm-radio-icon-checked
                opacity: 1
                transform: scale(1)

            .sm-radio-ripple-wrapper
                .sm-ripple
                    background-color: $md-colors.lightBlue500

    *
        pointer-events: none

    &.disabled
        cursor: not-allowed

.sm-radio-wrapper
    display: flex
    width: 100%
    height: 24px
    align-items: center
    justify-content: space-between

.sm-radio-icon
    width: 24px
    height: 24px
    vertical-align: middle
    position: relative
    margin-right: 16px
    .sm-radio.label-left &
        margin-right: 0
        margin-left: 16px
    .sm-radio.no-label &
        margin-left: 0
        margin-right: 0

.sm-radio-label
    color: rgba(0, 0, 0, 0.87);
    flex: 1
    font-size: 16px
    .sm-radio.disabled &
        color: alpha(#000, 0.38);

.sm-radio-svg-icon
    display: inline-block
    fill: currentColor
    height: 24px
    width: 24px
    user-select: none

.sm-radio-icon-uncheck
    position: absolute
    left: 0
    top: 0
    opacity: 1
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1)
    color: $md-colors.darkBlack;
    .sm-radio.disabled &
        color: alpha(#000, 0.38);

.sm-radio-icon-checked
    position: absolute
    left: 0
    top: 0
    opacity: 0
    color: #03a9f4
    transform: scale(0)
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1)
    .sm-radio.disabled &
        color: alpha(#000, 0.38);

.sm-radio .sm-radio-ripple-wrapper
    width: 48px
    height: 48px
    top: -12px
    left: -12px
    .sm-radio.label-left &
        right: -12px
        left: auto
